<template>
    <el-header height="164px" id="nav">
        <div class="bjsc-header-image">
            <div class="container-xl p-0" :style="{ position: 'relative', height: '100%' }">
                <img height="64"
                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/logo_2023_02_06.png" alt=""
                    :style="{ position: 'absolute', bottom: '10px' }">
            </div>
        </div>
        <div class="container-xl p-0">
            <div class="navbar navbar-expand-lg">
                <el-button class="navbar-toggler" link :style="{ marginRight: '20px', color: '#fff' }" @click="
                    collapse.display === 'block'
                        ? (collapse.display = 'none')
                        : (collapse.display = 'block')
                    ">
                    <el-icon size="24">
                        <Menu v-if="!collapse.display" />
                        <CloseBold v-else />
                    </el-icon>
                </el-button>
                <div class="collapse navbar-collapse" :style="collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav" :style="{ margin: '0 auto' }">
                        <router-link :to="{ path: '/' }" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <div>首页</div>
                            </li>
                        </router-link>
                        <router-link :to="routers.questionbank" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <div>题单</div>
                            </li>
                        </router-link>
                        <router-link :to="routers.question" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <div>题目</div>
                            </li>
                        </router-link>
                        <router-link :to="routers.activity" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <div>比赛</div>
                            </li>
                        </router-link>
                        <li class="nav-item" v-if="!update">
                            <a class="d-block"
                                :href="href ? href : 'https://www.hterobot.com/home.html?id=' + store.state.user?.ID"
                                :style="{ color: 'var(--bs-white)', textDecoration: 'none' }" target="_blank">
                                云课堂
                            </a>
                        </li>
                        <router-link :to="{ name: '科学中心' }" custom v-slot="{ navigate }" v-if="update">
                            <li class="nav-item" @click="navigate">
                                <div>大数据</div>
                            </li>
                        </router-link>
                    </ul>

                    <div class="d-flex">
                        <ul v-if="!getuser?.ID" class="navbar-nav mr-auto">
                            <el-popover :width="180">
                                <template #reference>
                                    <li class="nav-item p-1">
                                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/Chat%20Help.svg"
                                            width="19" :style="{ transform: 'translateY(-2px)' }" />
                                        <span>&nbsp;助教老师</span>
                                    </li>
                                </template>
                                <div :style="{ paddingLeft: '4px', paddingRight: '4px' }">
                                    <div :style="{ marginBottom: '12px' }">
                                        如系统使用有疑问，
                                        <br />可通过微信联系老师
                                    </div>
                                    <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/erweima_guhang.jpg"
                                        width="144" height="144" />
                                </div>
                            </el-popover>
                            <li @click="shoudialogVisible('登录')" class="nav-item p-1">登录</li>
                            <li @click="shoudialogVisible('注册')" class="nav-item p-1">注册</li>
                        </ul>
                        <ul v-else class="navbar-nav mr-auto">
                            <el-popover :width="180">
                                <template #reference>
                                    <li class="nav-item">
                                        <i class="iconfont">&#xe61b;</i>
                                        <span>&nbsp;助教老师</span>
                                    </li>
                                </template>
                                <div :style="{ paddingLeft: '4px', paddingRight: '4px' }">
                                    <div :style="{ marginBottom: '12px' }">
                                        如系统使用有疑问，
                                        <br />可通过微信联系老师
                                    </div>
                                    <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/erweima_guhang.jpg"
                                        width="144" height="144" />
                                </div>
                            </el-popover>
                            <li class="nav-item">
                                <Notice />
                            </li>
                            <li class="nav-item">
                                <el-dropdown ref="dropdownref" :max-height="400" :tabindex="10"
                                    @command="handleCommand2">
                                    <div class="avater-h">

                                        <span class="avater-name hov" style="font-size: 14px">
                                            <i class="iconfont">&#xe600;</i>
                                            团队</span>
                                    </div>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item v-for="(v, k) in getteam" :key="'team_' + k"
                                                class="position-relative" :command="k">
                                                <router-link :to="`/team/${v.ID}`" custom v-slot="{ navigate }">
                                                    <span class="stretched-link"
                                                        @click="() => { dropdownref.handleClose(); navigate() }"
                                                        v-text="v.name"></span>
                                                </router-link>
                                            </el-dropdown-item>
                                            <!-- <el-dropdown-item class="tmp111" command="a"  :disabled="!getuser">创建团队</el-dropdown-item> -->
                                            <el-dropdown-item divided command="b">搜索团队</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </li>
                            <li class="nav-item">
                                <el-dropdown @command="handleCommand">
                                    <div class="avater-h">
                                        <el-avatar style="transform: translateY(7px)" size="small"
                                            :src="circleUrl"></el-avatar>
                                        <span class="avater-name hov" :style="{ marginLeft: '10px' }"
                                            v-text="getuser ? getuser.name : ''"></span>
                                    </div>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item command="u">个人中心</el-dropdown-item>
                                            <el-dropdown-item command="a">管理我的题目</el-dropdown-item>
                                            <el-dropdown-item command="c">测试点贡献查询</el-dropdown-item>
                                            <el-dropdown-item class="tmp111" command="d" divided
                                                v-if="!update">修改个人信息</el-dropdown-item>
                                            <el-dropdown-item command="b">退出</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog v-model="dialogVisible" class="el-dialog-z" width="502px" append-to-body :lock-scroll="false">
            <template #header>
                <span></span>
            </template>
            <div class="row justify-content-md-center text-login">
                <div class="col">
                    <h4 v-text="name" :class="name == '登录' ? 'text-center' : ''"></h4>
                </div>
            </div>

            <div id="navel-dialog" class="row justify-content-md-center text-body">

                <div class="col" v-show="name == '登录'">
                    <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="left">
                        <el-form-item class="text-item text-center" label-width="0">
                            <img style="transform: translateX(10px)" width="80" class="headimage"
                                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
                        </el-form-item>
                        <el-form-item class="text-item" label="账号/手机号">
                            <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="密码" name="password" type="password"
                                v-model="form.password"></el-input>
                        </el-form-item>
                        <div class="text-right pu" @click="name = '忘记密码'">找回/修改密码</div>
                        <el-form-item label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col">
                                    <button class="btn d-block btn-login" type="button" @click="login">登录</button>
                                </div>
                                <div class="col">
                                    <button class="btn d-block btn-login" type="button"
                                        @click="name = '注册'">用户注册</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="col" v-show="name == '忘记密码'">
                    <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="left">
                        <el-form-item class="text-item text-center" label-width="0">
                            <img style="transform: translateX(10px)" width="80" class="headimage"
                                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
                        </el-form-item>
                        <el-form-item class="text-item" label="手机号：" prop="phonenum">
                            <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="验证码：" prop="yzm">
                            <div class="row m-0">
                                <div class="col p-0">
                                    <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                                </div>
                                <div class="col pr-0">
                                    <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                                        @click.stop.prevent="click2" :disabled="time2 !== 60"
                                        v-text="time2 == 60 ? '验证码' : time2"></button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item class="text-item" label="新密码：" prop="password">
                            <el-input placeholder="请输入新密码" name="newpassword" type="password"
                                v-model="forget.password"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col p-0 text-right">
                                    <button class="btn btn-login d-block" type="button"
                                        @click="forgetpassword">修改密码</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <el-dialog width="530px" class="el-dialog-z-1" v-model="innerVisible">
                    <div>
                        <img :src="im" class="headimage" @click="
                            register.headportrait = im;
                        passwordform.headportrait = im;
                        innerVisible = false;
                        " v-for="im in headimage" :key="im" />
                    </div>
                </el-dialog>

                <div class="col" v-show="name == '注册'">
                    <el-form ref="registerref" :rules="registerrole" :model="register" label-width="95px" size="default"
                        label-position="left">
                        <el-form-item class="text-item cu" @click="innerVisible = true" label-width="0">
                            <img :src="register.headportrait" class="headimage" width="80" />
                            &nbsp;&nbsp;&nbsp;点击图片修改头像
                        </el-form-item>
                        <el-form-item class="text-item" label="手机号：" prop="phonenum">
                            <el-input placeholder="请输入手机号" name="phonenum" v-model="register.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="验证码：" prop="yzm">
                            <div class="row m-0">
                                <div class="col p-0">
                                    <el-input placeholder="请输入验证码" v-model="register.yzm"></el-input>
                                </div>
                                <div class="col pr-0">
                                    <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                                        @click.stop.prevent="click" :disabled="time !== 60"
                                        v-text="time == 60 ? '验证码' : time"></button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item class="text-item" label="密码：" prop="password">
                            <el-input type="password" name="password" placeholder="请输入密码"
                                v-model="register.password"></el-input>
                        </el-form-item>

                        <el-form-item class="text-item">
                            <el-input placeholder="请输入用户名" label="用户名：" name="name" v-model="register.name"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col p-0">
                                    <button class="btn btn-login d-block" type="button"
                                        @click="registersubmit">注册</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="col" :style="{ marginTop: '24px' }" v-show="name == '修改个人信息'">
                    <el-form ref="registerref" :model="passwordform" label-width="95px" size="default"
                        label-position="left">
                        <el-form-item class="text-item" label="用户名：" prop="name">
                            <el-input type="text" placeholder="请输入用户名" v-model.trim="passwordform.name"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="原始密码：" prop="password">
                            <el-input type="password" name="password" placeholder="请输入原始密码"
                                v-model="passwordform.password">
                            </el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="新密码：" prop="password1">
                            <el-input type="password" name="password" placeholder="请输入新密码"
                                v-model="passwordform.password1">
                            </el-input>
                        </el-form-item>
                        <el-form-item class="text-item cu" @click="innerVisible = true" label-width="0">
                            <img :src="passwordform.headportrait
                                ? passwordform.headportrait
                                : getuser
                                    ? getuser.headportrait
                                    : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg'
                                " class="headimage" :style="{ width: '56px', height: '56px' }" width="56" />
                            &nbsp;&nbsp;&nbsp;点击图片修改头像
                        </el-form-item>
                        <el-form-item class="text-item" prop="phonenum" label="手机号：">
                            <el-input placeholder="请输入手机号" name="phonenum" v-model="passwordform.phonenum"></el-input>
                        </el-form-item>

                        <el-form-item class="text-item" label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col p-0">
                                    <button class="btn btn-login d-block" type="button"
                                        @click="changepassword">修改个人信息</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="搜索团队" v-model="dialogVisibleteam" width="500px" center append-to-body
            :close-on-click-modal="false">
            <el-form :model="teamForm" :rules="teamrules" ref="ruleFormteam" label-width="100px" class="demo-ruleForm">
                <el-form-item label="团队名称：" prop="teamid">
                    <el-select v-model="teamForm.teamid" filterable remote reserve-keyword placeholder="请输入团队名称"
                        :remote-method="remoteMethod" :loading="teamloading">
                        <el-option v-for="item in teamselect" :key="item.ID" :label="item.name"
                            :value="Number(item.ID)">
                            <span style="float: left">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">
                                {{
                                    item.user?.name
                                }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请理由：">
                    <el-input v-model="teamForm.context"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button plain @click="submitForm('ruleFormteam')">提交申请</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-header>
</template>

<script setup lang='ts'>
import { CloseBold, Menu } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { computed, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
    asyncaddteamlog,
    asyncchangepassword,
    asynccreateteam,
    asynclogout,
    asyncselectteams,
} from "../../api";
import {
    asyncgetregistphoneVerificationCode,
    asynclogin,
    asyncresetpassword,
    asyncuserregist,
} from "../../api/index";
import Notice from "../../components/notice/index1.vue";
import headimage from "../../index/data/headimage";
import * as routers from "../../index/data/router";
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import { isPhonenum } from "../../util/RegExp";
const router = useRouter()
const teamloading = ref(false)
const dialogVisible = ref(false)
const dialogVisibleteam = ref(false)
const collapse = reactive<Record<string, any>>({})
const teamselect = ref<Studycodemodel.Iteam[]>([])
const time = ref(60)
const time2 = ref(60)
defineProps<{ icon: string, update?: boolean, href?: string }>()

const dropdownref = ref()

const passwordform = reactive({
    name: '',
    password: "",
    password2: "",
    password1: "",
    headportrait: "",
    phonenum: ""
})

const form = reactive({
    password: "",
    phonenum: "",
})

const register = reactive({
    phonenum: "",
    password: "",
    yzm: "",
    headportrait: headimage[9],
    name: "",
})
const forget = reactive({
    phonenum: "",
    password: "",
    yzm: "",
})

const teamForm = reactive<Record<string, any>>({
    userid: 0,
    username: "",
    type: "申请",
    context: "",
})

const name = ref('登录')

const registerrole = {
    phonenum: [
        {
            message: "手机号不合法",
            regexp: isPhonenum,
            trigger: "blur",
        },
    ],
    password: [
        {
            min: 4,
            max: 25,
            message: "长度在 3 到 25 个字符",
            trigger: "blur",
        },
    ],
    yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
}
const teamrules = {
    teamid: [{ required: true, message: "请选择团队", trigger: "blur" }],
}

const innerVisible = ref(false)

const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})

const getteam = computed(() => {
    return store.state.team?.rows || []
})

const circleUrl = computed(() => {
    if (getuser.value) return getuser.value.headportrait;
    return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
})


async function handleCommand(co: string) {
    switch (co) {
        case "a":
            router.push({ name: "我的资源" });
            break;
        case "b":
            await asynclogout();
            location.reload()
            await store.dispatch('actiononline')
            break;
        case "c":
            router.push({
                name: "贡献测试点查询",
            });
            break;
        case "u":
            router.push({
                name: "用户",
            });
            break;
        case "d":
            dialogVisible.value = true;
            name.value = "修改个人信息";
            break;
        default:
    }
}




function shoudialogVisible(name1: string) {
    dialogVisible.value = true;
    if (name1) {
        name.value = name1;
    }
}

async function login() {
    const { phonenum, password } = form;
    try {
        await asynclogin({ ID: phonenum, password });
        location.reload()
        await store.dispatch('actiononline')
        dialogVisible.value = false;
        ElMessage.success("登录成功");
    } catch (e: any) {
        ElMessage.error(e);
    }
}

function remoteMethod(query: string) {
    if (query) {
        teamloading.value = true;
        asyncselectteams({
            name: query,
        })
            .then((e) => {
                teamselect.value = e.rows;
                teamloading.value = false;
            })
            .catch((e) => {
                teamselect.value = [];
                teamloading.value = false;
                ElMessage.warning(e);
            });
    }
}

async function click() {
    const { phonenum } = register;
    if (time.value !== 60) return;
    if (isPhonenum.test(phonenum)) {
        await asyncgetregistphoneVerificationCode(phonenum);
        const x = setInterval(() => {
            time.value = time.value - 1
            if (time.value == 0) {
                clearInterval(x);
                time.value = 60;
            }
        }, 1000);
    }
}

async function click2() {
    const { phonenum } = forget;
    if (time2.value !== 60) return;
    if (isPhonenum.test(phonenum)) {
        await asyncgetregistphoneVerificationCode(phonenum);
        const x = setInterval(() => {
            time2.value = time2.value - 1;
            if (time2.value == 0) {
                clearInterval(x);
                time2.value = 60;
            }
        }, 1000);
    }
}

async function changepassword() {
    try {
        await asyncchangepassword(passwordform);
        ElMessage.success("修改个人信息成功");
        dialogVisible.value = false;
    } catch (e: any) {
        ElMessage.error(e);
    }
}

const forgetref = ref<typeof ElForm>()

async function forgetpassword() {
    forgetref.value?.validate(async (valid: any) => {
        if (valid) {
            try {
                await asyncresetpassword(forget);
                ElMessage.success("修改个人信息成功");
                await asynclogin({
                    ID: forget.phonenum,
                    password: forget.password,
                });
                await store.dispatch('actiononline')
                dialogVisible.value = false;
            } catch (e: any) {
                ElMessage.error(e);
            }
        } else {
            return false;
        }
    });
}

function handleCommand2(co: string) {
    dropdownref.value?.handleClose()
    switch (co) {
        case "a":
            if (!getuser.value) {
                shoudialogVisible('登录');
            } else {
                if (
                    getteam.value.filter((v) => v.userid === getuser.value?.ID).length >
                    4
                ) {
                    ElMessage.warning("创建团队数上限为5");
                    return;
                }

                ElMessageBox.prompt("请输入名称", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }).then(({ value }) => {
                    if (value) {
                        asynccreateteam({ name: value })
                            .then((e) => {
                                if (e.ID) {
                                    router.push({
                                        name: "团队",
                                        params: {
                                            ID: e.ID,
                                        },
                                    });
                                }
                            })
                            .catch((e) => {
                                ElMessage.error(e);
                            });
                    }
                });
            }
            break;
        case "b":
            dialogVisibleteam.value = true;
            break;
        default:
            return
    }
}
const ruleFormteam = ref<typeof ElForm>()

async function submitForm(name: string) {
    const t = ruleFormteam.value

    t?.validate(async (v: any) => {
        if (v) {
            await asyncaddteamlog(teamForm)
                .then(() => {
                    ElMessage.success("提交成功");
                    dialogVisibleteam.value = false;
                })
                .catch((e) => {
                    ElMessage.warning(e);
                });
        }
    });
}

const registerref = ref()

async function registersubmit() {
    registerref.value.validate(async (valid: any) => {
        if (valid) {
            try {
                await asyncuserregist(register);
                ElMessage.success("注册成功");
                await store.dispatch('actiononline')
                dialogVisible.value = false;
                location.reload()
            } catch (e: any) {
                ElMessage.error(e);
            }
        } else {
            return false;
        }
    });
}

watch(() => store.state.user, (e) => {
    if (e) {
        passwordform.name = e.name ? e.name : ''
    }
})


defineExpose({
    shoudialogVisible,
    handleCommand,
    handleCommand2
})


</script>

<style scoped>
#nav {
    background-color: var(--color--cheng);
    left: 0px;
    top: 0px;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
    box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
    --el-header-padding: 0;
    --nav-height: 40px;

    /*  */
    background-color: rgba(49, 52, 93, 1);
    /* height: calc(var(--el-header-height)); */
    /* background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/header_2023_02_06.jpg.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%; */
}

#nav .navbar {
    padding: 0;
    height: var(--nav-height);
    line-height: var(--nav-height);
}

.nav-item:hover {
    color: rgb(197 217 185);
}

.nav-item:hover a {
    color: rgb(197 217 185) !important;
}

.hov:hover {
    color: rgb(197 217 185);
}

.router-link-exact-active {
    color: rgb(197 217 185);
}

.avater-name {
    display: inline-block;
    font-size: 14px;
    color: var(--bs-white);
}

.avater-h {
    line-height: var(--nav-height);
}



.pu {
    cursor: pointer;
    color: var(--color-909399);
    line-height: 15px;
    margin-bottom: 20px;
}


.text-login {
    margin-bottom: 3px;
    margin-top: 3px;
}

.text-login h4 {
    text-align: center;
    font-size: 28px;
    font-weight: 650;
    color: var(--color-606266);
}

.text-body .col-6 {
    min-height: 400px;
}

.btn {
    height: 40px;
    font-size: 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

.btn-login {
    background: var(--color-43);
    border-radius: 2px !important;
    color: #fff;
}

.btn-login:hover {
    color: #fff;
    background-color: var(--color-cheng);
}

.text-item {
    margin-bottom: 28px;
}

.p-1 {
    font-size: 14px;
}

.nav-item-name {
    line-height: 64px;
}

.headimage {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    cursor: pointer;
}

.d-block {
    width: 100%;
}

#nav .navbar {
    padding: 0;
}

.nav-item {
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
    color: var(--bs-white);
    text-decoration: none;
    height: var(--nav-height);
    position: relative;
}


.router-link-exact-active {
    color: var(--color-cheng);
}

.pu {
    cursor: pointer;
    color: var(--color-909399);
    line-height: 15px;
    margin-bottom: 20px;
}

.text-login {
    margin-bottom: 3px;
    margin-top: 3px;
}

.text-login h4 {
    text-align: center;
    font-size: 28px;
    font-weight: 650;
    color: var(--color-606266);
}

.text-body .col-6 {
    min-height: 400px;
}

.btn {
    height: 40px;
    font-size: 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

.btn-login {
    background: var(--color-43);
    border-radius: 2px !important;
    color: #fff;
}

.btn-login:hover {
    color: #fff;
    background-color: var(--color-cheng);
}

.text-item {
    margin-bottom: 28px;
}

.p-1 {
    font-size: 14px;
}

.headimage {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    cursor: pointer;
}

.d-block {
    width: 100%;
}

.el-dialog-z-1 {
    height: 340px;
}

.iconfont {
    font-size: 14px;
    padding-right: 2px;
}

.bjsc-header-image {
    height: calc(var(--el-header-height) - var(--nav-height));
    background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/header_2023_02_06.jpg.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
}

.collapse:not(.show) {
    transition: all 0.3s;
    /* background-color: var(--color-cheng); */
    background-color: rgba(49, 52, 93, 1);

}
</style>


<style>
.el-dialog-z {
    background-repeat: no-repeat !important;
    background-position: left !important;
    border: 0px;
    background-size: 464px 100% !important;
    background-color: rgba(255, 255, 255, 1) !important;
    min-height: 530px;
}

.el-dialog-z .icon {
    font-size: 1rem;
}

.el-dialog-z .el-dialog__header {
    padding: 0;
}


#navel-dialog .el-form-item__content {
    display: block;
}


.el-dialog-z-1 {
    height: 340px;
}

.el-dialog-z-1 img {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#nav .el-badge {
    vertical-align: initial;
}

#nav .el-dropdown {
    color: #212529;
}



.tmp111:before {
    display: none !important;
}
</style>